<template>
  <div class="app-aside">
    <router-link class="navbar-brand" to="/">
      <img src="../../assets/img/logos/logo-xs.png" class="logo-xs">
      <img src="../../assets/img/logos/logo-sm.png" class="logo-sm">
      <img src="../../assets/img/logos/logo.png" class="logo">
    </router-link>
    <div class="aside-title">导航菜单</div>
    <!--<router-link class="aside-item" to="/" title="Dashboard" v-ripple exact>-->
      <!--<i class="fa fa-dashboard"></i><span>Dashboard</span>-->
    <!--</router-link>-->
    <main-menu-item :item="item" v-for="item in menuList" :key="item.menuId"></main-menu-item>
  </div>
</template>

<script>

import MainMenuItem from './MainMenuItem'
export default {
  name: 'AppAside',
  components: {MainMenuItem},
  data: () => ({
    menuList: [{
      "menuId": 1,
      "parentId": 0,
      "parentName": null,
      "name": "系统管理",
      "url": null,
      "perms": null,
      "type": 0,
      "icon": "fa fa-coffee",
      "orderNum": 0,
      "gmtCreate": null,
      "gmtModified": null,
      "open": null,
      "list": [
        {
          "menuId": 37,
          "parentId": 1,
          "parentName": null,
          "name": "行政区域",
          "url": "/members/list",
          "perms": null,
          "type": 1,
          "icon": "fa fa-leaf",
          "orderNum": 0,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        },
        {
          "menuId": 2,
          "parentId": 1,
          "parentName": null,
          "name": "系统菜单",
          "url": "/base/menu/list",
          "perms": null,
          "type": 1,
          "icon": "fa fa-th-list",
          "orderNum": 1,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        },
        {
          "menuId": 4,
          "parentId": 1,
          "parentName": null,
          "name": "通用字典",
          "url": "/base/macro/list",
          "perms": null,
          "type": 1,
          "icon": "fa fa-book",
          "orderNum": 2,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        },
        {
          "menuId": 27,
          "parentId": 1,
          "parentName": null,
          "name": "系统日志",
          "url": "/base/log/list",
          "perms": null,
          "type": 1,
          "icon": "fa fa-warning",
          "orderNum": 3,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        },
        {
          "menuId": 47,
          "parentId": 1,
          "parentName": null,
          "name": "定时任务",
          "url": "/base/quartz/list",
          "perms": null,
          "type": 1,
          "icon": "fa fa-bell",
          "orderNum": 4,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        },
        {
          "menuId": 59,
          "parentId": 1,
          "parentName": null,
          "name": "敏捷开发",
          "url": "/base/generator/list",
          "perms": null,
          "type": 1,
          "icon": "fa fa-archive",
          "orderNum": 5,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        },
        {
          "menuId": 67,
          "parentId": 1,
          "parentName": null,
          "name": "系统监控",
          "url": "/druid/index",
          "perms": null,
          "type": 1,
          "icon": "fa fa-bug",
          "orderNum": 6,
          "gmtCreate": null,
          "gmtModified": null,
          "open": null,
          "list": null
        }
      ]
    },
      {
        "menuId": 74,
        "parentId": 0,
        "parentName": null,
        "name": "风控规则管理",
        "url": null,
        "perms": null,
        "type": 0,
        "icon": "fa fa-gears",
        "orderNum": 0,
        "gmtCreate": null,
        "gmtModified": null,
        "open": null,
        "list": [
          {
            "menuId": 80,
            "parentId": 74,
            "parentName": null,
            "name": "规则组",
            "url": "/base/rulegroup/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-object-group",
            "orderNum": null,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 85,
            "parentId": 74,
            "parentName": null,
            "name": "风控规则",
            "url": "/base/riskrule/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-registered",
            "orderNum": null,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 90,
            "parentId": 74,
            "parentName": null,
            "name": "规则CQL",
            "url": "/base/riskcql/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-file-text-o",
            "orderNum": null,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 95,
            "parentId": 74,
            "parentName": null,
            "name": "规则参数配置",
            "url": "/base/ruleparameter/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-tag",
            "orderNum": null,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 100,
            "parentId": 74,
            "parentName": null,
            "name": "风控规则组",
            "url": "/base/risk2/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-circle-o",
            "orderNum": 0,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          }
        ]
      },
      {
        "menuId": 111,
        "parentId": 0,
        "parentName": null,
        "name": "风控历史",
        "url": null,
        "perms": null,
        "type": 0,
        "icon": "fa fa-navicon",
        "orderNum": 0,
        "gmtCreate": null,
        "gmtModified": null,
        "open": null,
        "list": [
          {
            "menuId": 101,
            "parentId": 111,
            "parentName": null,
            "name": "单条判定结果",
            "url": "/base/riskresultsinfo/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-th",
            "orderNum": null,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 106,
            "parentId": 111,
            "parentName": null,
            "name": "风险控制历史记录",
            "url": "/base/risklog/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-th-list",
            "orderNum": null,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          }
        ]
      },
      {
        "menuId": 3,
        "parentId": 0,
        "parentName": null,
        "name": "组织机构",
        "url": null,
        "perms": null,
        "type": 0,
        "icon": "fa fa-desktop",
        "orderNum": 1,
        "gmtCreate": null,
        "gmtModified": null,
        "open": null,
        "list": [
          {
            "menuId": 36,
            "parentId": 3,
            "parentName": null,
            "name": "机构管理",
            "url": "/base/org/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-sitemap",
            "orderNum": 0,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 7,
            "parentId": 3,
            "parentName": null,
            "name": "角色管理",
            "url": "/base/role/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-paw",
            "orderNum": 1,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          },
          {
            "menuId": 6,
            "parentId": 3,
            "parentName": null,
            "name": "用户管理",
            "url": "/base/user/list",
            "perms": null,
            "type": 1,
            "icon": "fa fa-user",
            "orderNum": 2,
            "gmtCreate": null,
            "gmtModified": null,
            "open": null,
            "list": null
          }
        ]
      }]
  }),
  mounted () {
//    var elem = this.$el
//    var items = Array.from(elem.querySelectorAll('.aside-item'))
//    var current = elem.querySelector('.router-link-exact-active')
//
//    if (current) {
//      openActiveItemAncestors(current, elem)
//    }
//
//    elem.addEventListener('click', function (event) {
//      var el = event.target
//      var sibs = siblings(el)
//      items.forEach(e => {
//        e.classList.remove('active')
//      })
//      sibs.forEach(e => {
//        e.classList.remove(openedClass)
//      })
//      el.classList.add(openedClass)
//      el.classList.add('active')
//    })
  }
}
</script>

<style lang="scss">
  .app-aside {
    padding-top: 41px;
    min-width: 220px;
    z-index: 1;
    &:after {content: ' ';position: fixed;width: inherit;top: 0;bottom: 0;z-index: -1;background-color: inherit;border: inherit}
    .aside-title {padding: 6px 10px 0;font-size: .75rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
    .aside-divider {margin: .5rem 0;border-bottom: 1px solid #c7dcea}

    .aside-item {
      transition: background-color .1s ease-in-out 0s;
      border: 1px solid transparent;
      border-width: 1px 0 1px 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      display: block;
      z-index: 15;
      &.opened {background-color: #d4e9fa}
      &.parent:after {font-family: FontAwesome;position: absolute;right: 1rem;top: 10px;content: '\F105';transition: transform .2s}
      &.parent.opened:after {transform: rotate(90deg)}
      &.opened > .children {display: block}
      span {line-height: 43px;padding-left: 50px}
      > i {position: absolute;line-height: inherit;text-align: center;border-radius: 5px;left: 10px;top: 6px;padding: 3px;width: 30px}
      > .badge {top: 2px;left: 35px;z-index: 2;min-width: 15px;min-height: 15px;opacity: .7}
    }

    .children {
      background-color: #ddeefb;margin: 0;padding: 0;display: none;
      .fold-header {display: none;line-height: 45px;padding-left: 10px;cursor: pointer}
      .aside-item {
        font-size: .9375rem;
        &:hover {background-color: #cae8fb}
        > i {background-color: transparent !important;top: 8px}
        @for $i from 1 through 15 {
          &:nth-child(#{$i}) {animation: qb #{0.1 + $i * .07}s ease-in}
        }
      }
    }
  }
  @media (max-width: 991px) {
    .app-header {left: 51px !important}
    .app-aside,
    .navbar-brand {
      min-width: 51px;
      max-width: 51px;
    }
    .navbar-brand > .logo-xs {display: inline-block !important}
    .app-aside {
      overflow: visible;

      .children .fold-header {display: block}
      .aside-item {
        height: 45px;
        > span { display: none }
      }
      .children {
        max-height: 800px;
        width: 200px;
        position: absolute;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 20;
        left: 100%;
        top: -1px;
      }
      > .aside-item:hover {
        overflow: visible;
        .children {
          display: block;
          .aside-item > span {display: inline}
        }
      }
    }
  }
  @media (max-width: 767px) {
    .app-header .dropdown-menu-right {
      min-width: 100%;
      position: fixed;
      top: 39px
    }
    .app-aside {
      .aside-item {
        overflow: hidden !important;
        &:hover > .children {display: none}
        &.opened > .children {display: block}
        > .children {position: static;width: 100%}
        > .children > .fold-header {display: none}
      }
    }
    .aside-fixed {
      &.aside-folded .app-header {left: 51px}
      .app-aside {position: fixed;top: 0;bottom: 0}
      .app-content {margin-left: 220px}
      .app-header .navbar-header {width: 220px}
    }

    .aside-hover {
      .app-aside,
      .navbar-brand {transition: width .2s ease-in-out}
      .navbar-brand {background-color: #fbfbfb;border-color: transparent}
      .app-aside {
        max-width: 51px;position: fixed;top: 40px;bottom: 0;overflow-y: hidden;overflow-x: hidden;z-index: 15;
        .aside-item {
          height: 45px;
          overflow: hidden;
          &:after {display: none}
        }
        &:hover {
          min-width: 220px; overflow-y: auto;
          .aside-item:after {display: block}
          .aside-item.opened {height: auto}
          .aside-item.opened > .children {display: block}
          .aside-item > .children {position: static;width: 100%}
          .aside-item > .children > .fold-header {display: none}
          .aside-item > span {display: inline-block}
        }
      }
      .app-content {margin-left: 51px}
    }
  }
  @media (max-width: 544px) {
    .app-header {left: 0 !important}
    .aside-pushed #app {transform: translateX(220px)}
    .navbar-brand,
    .app-aside {
      transform: translateX(-220px);
      position: absolute;
      width: 220px;
    }
    .aside-folded {
      &.footer-fixed .app-footer { left: 51px }
      .navbar-brand {
        width: 51px;
        > .logo-xs { display: inline-block }
      }
      .app-aside {
        overflow: visible;
        max-width: 51px;
        .children .fold-header { display: block }
        .children {position: absolute;left: 100%;top: -1px;width: 200px;max-height: 800px;overflow-x: hidden;overflow-y: auto;z-index: 20}
        > .aside-item:hover {overflow: visible}
        > .aside-item:hover .children {display: block}
        > .aside-item:hover .children .aside-item > span {display: inline}
      }
    }
  }
</style>
